{% extends 'styles/style_base.html' %}{% load i18n bootstrap_pagination humanize static thumbnail styles_custom_tags %}

{% block extrajs %}
{{ block.super }}
<style>
    table > thead > tr > th > a {
        color: grey;
    }
    .sorted {
        color: #006dcc;
        font-size: 20px;
    }
    .sorted-name {
        color: #006dcc;
    }

    table > tbody > tr {
        height: 120px;
    }

    .table td {
        vertical-align: middle;
    }

    img.style-icon {
        width: 100px;
        height: 100px;
    }

    img.style-icon:hover {
        width: 320px;
        height: 320px;
        position: absolute;

        margin-top: -250px;
        margin-left: -220px;
        border-radius: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }
</style>
{% endblock %}

{% block content %}
    <h2>{% if title %}{{title}}{% else %}{% trans "All Styles" %}{% endif %}</h2>

    {% if not style_list and not queries %}
        <p>No data.</p>
    {% elif not style_list and queries %}
        <p>
            Keyword: "<strong>{{ queries }}</strong>" <br /> Search result: no record found.
        </p>
    {% else %}
        <p>
            {%  if queries %}
                Keyword: "<strong>{{ queries }}</strong>" <br /> Search result:
            {% endif %}
            {{ count }} record{{ style_list.count|pluralize:"s" }} found.
        </p>
        <table class="table table-striped plugins">
        <thead>
            <tr>
                <th></th>
                <th> {% anchor_sort_arrow 'Name' 'name' order_by queries %} </th>
                <th> {% anchor_sort_arrow 'Type' 'type' order_by queries %} </th>
                <th>
                    <i class="icon-download-alt" title="{% trans 'Download Count' %}"></i>
                    {% anchor_sort_arrow '' 'download_count' order_by queries %}
                </th>
                <th> {% anchor_sort_arrow 'Creator' 'creator' order_by queries %} </th>
                <th> {% anchor_sort_arrow 'Upload Date' 'upload_date' order_by queries %} </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for style in style_list %}
                <tr>
                    <td>
                    {% if style.thumbnail_image and style.thumbnail_image.file %}
                        {% thumbnail style.thumbnail_image "420x420" format="PNG" as im %}
                            <img class="style-icon" alt="{% trans "Style icon" %}" src="{{ im.url }}" width="{{ im.x }}" height="{{ im.y }}" />
                        {% endthumbnail %}
                    {% else %}
                        <img height="32" width="32" class="plugin-icon" src="{% static "images/qgis-icon-32x32.png" %}" alt="{% trans "Plugin icon" %}" />
                    {% endif %}
                    </td>
                    <td><a href="{% url 'style_detail' style.id %}">{{ style.name|title }}</a></td>
                    <td><span class="center-vertical">{{ style.style_type.name|title }}</span></td>
                    <td>{{ style.download_count }}</td>
                    <td>{{ style.get_creator_name|title }}</td>
                    <td>{{ style.upload_date|date:"d F Y" }}</td>
                    <td>
                        {% if user.is_staff or user == style.creator %}
                        <a class="btn btn-primary btn-mini" href="{% url 'style_update' style.id %}" title="{% trans "Edit" %}"><i class="icon-pencil icon-white"></i></a>&nbsp
                        <a class="btn btn-danger btn-mini delete" href="{% url 'style_delete' style.id %}" title="{% trans "Delete" %}"><i class="icon-remove icon-white"></i></a>&nbsp
                        {% endif %}
                        <a class="btn btn-primary btn-mini pull-right" href="{% url 'style_download' style.id %}" title="{% trans "Download" %}"><i class="icon-download-alt"></i></a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <div class="pagination">
    {% include 'sortable_listview/pagination.html' %}
    </div>

    {% endif %}


    <script type="text/javascript">
    $(document).ready(function(){
        // Add arguments in pagination
        const orderBy = new URLSearchParams(window.location.search).get("order_by");
        const queries = new URLSearchParams(window.location.search).get("q");
        if (orderBy){
            $(".pagination li a").each(function(){
                this.href += 'order_by=' + orderBy +'&&';
            })
        }
        if (queries){
            $(".pagination li a").each(function(){
                this.href += 'q=' + queries +'&&';
            })
        }

        // change color for sorted head
        $("table thead tr th a").each(function(i, el){
            if ($(this).hasClass("sorted")){
                $(this).closest("th").addClass("sorted-name")
            }
        })

        // edit search input from base template, in order to use it for styles
        $("form.navbar-search").attr("action", "");

    })
    </script>
{% endblock %}

